<template>
  <div class="activePage">
    <div class="header">
      <div class="radiu">
        <el-button type="primary" icon="el-icon-back">返回</el-button>
      </div>
      <div class="step">
        <p :class="[active==1?'activeClassName':'']">1.填写资料</p>
        <p :class="[active>1?'activeClassName':'']"> 2.确认分析结果</p>
        <p :class="[active>2?'activeClassName':'']"> 3.生成快速筛选报告</p>
      </div>
    </div>
    <div class="content">
      <step1></step1>
    </div>
    <div class="footer">
      <el-button type="primary" v-if="active==1" @click="submitForm('ruleForm')">开始分析</el-button>

    </div>
  </div>

</template>
<script>
import step1 from "./step1.vue";
export default {
  components: {
    step1,
  },
  data() {
    return {
      active: 1,
    };
  },
 
};
</script>
<style scoped>
.activePage {
  /* border: 1px solid red; */
  min-height: 100%;
  position: relative;
  box-sizing: border-box;
  /* min-width: 1440px; */
  /* margin-top: -30px; */
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.header {
  width: 80%;
  margin-left: 0;
  height: 55px;
  /* border: 1px solid green; */
  display: flex;
  align-items: center;
  width: 1170px;
}
.radiu button {
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
.step {
  flex: 1;
  display: flex;
  justify-content: space-around;
}
.step p {
  position: relative;
  width: 150px;
  text-align: center;
}
.defaultClass {
  color: #409eff;
}
.step p::after {
  content: "";
  position: absolute;
  width: 150px;
  top: 50%;
  right: -50%;
  transform: translateX(50%);
  border: 0.3px dashed #d6d6d6;
}
.activeClassName {
  color: #409eff;
}
.activeClassName::after {
  content: "";
  background: #409eff;
}
.step p:last-child::after {
  content: "";
  position: absolute;
  width: 0;
}
.content {
  flex: 1;

  /* width: 1170px; */
  min-width: 1440px;
  width: 100%;
}
</style>